<template>
  <div class="rich-input" :class="conf.type" @click.stop="">
    <span>{{index}}</span>
    <input type="text" ref="input" v-model="conf.txt" @keydown="keydown">
  </div>
</template>
<script>
const textType = ["txt", "code",];
export default {
  name: 'home',
  props: ["conf", "list", "focus", "index"],
  data() {return {}},
  computed: {},
  mounted() {},
  methods: {
    keydown(ev){
      const start = ev.target.selectionStart;
      const end = ev.target.selectionEnd;
      const len = this.list.length;
      if (ev.altKey && [49, 50].includes(ev.which)){
        this.conf.type = textType[ev.which - 49];
      }
      if (ev.which === 37) {
        const index = this.list.indexOf(this.conf);
        const prev = this.list[index - 1];
        if (!start && prev) {
          this.focus(Math.max(index - 1, 0), prev.txt.length);
        }
      }
      if (ev.which === 39) {
        const index = this.list.indexOf(this.conf);
        const next = this.list[index + 1];
        if (start === this.conf.txt.length && next) {
          this.focus(index + 1, 0);
        }
      }
      if (ev.which === 38) {
        const index = this.list.indexOf(this.conf);
        this.focus(Math.max(index - 1, 0), start);
      }
      if (ev.which === 40) {
        const index = this.list.indexOf(this.conf);
        this.focus(Math.min(index + 1, len - 1), start);
      }
      if (ev.which === 8) {
        if (!start && end === start && len > 1) {
          const index = this.list.indexOf(this.conf);
          this.list.splice(index, 1);
          const prev = this.list[index - 1];
          let position = 0;
          if (prev) {
            position = prev.txt.length;
            prev.txt = prev.txt + this.conf.txt;
          }
          this.focus(Math.min(index - 1, len - 2), position);
          ev.stopPropagation();
          ev.preventDefault();
        }
      }
      if (ev.which === 9) {
        const oriVal =  ev.target.value;
        const start = ev.target.selectionStart;
        const startStr = oriVal.slice(0, start);
        const endStr = oriVal.slice(ev.target.selectionEnd, oriVal.length);
        try {
          ev.target.value = startStr + `  ` + endStr;
          ev.target.setSelectionRange(start+2, start + 2);
        } catch (e) {}
        ev.stopPropagation();
        ev.preventDefault();
      }
      if (ev.which === 13) {
        const index = this.list.indexOf(this.conf);
        const oriVal =  ev.target.value;
        const startStr = oriVal.slice(0, start);
        const endStr = oriVal.slice(ev.target.selectionEnd, oriVal.length);
        this.conf.txt = startStr;
        this.list.splice(index + 1, 0, {type: this.conf.type, txt: endStr});
        setTimeout(() => this.focus(index + 1, 0), 0);
      }
    },
  },
}
</script>
<style scoped>
  .rich-input{
    padding: 2px;
    display: flex;
  }
  .rich-input>span{
    width: 20px;
    text-align: right;
    font-size: 12px;
    color: #fff;
    padding-right: 10px;
  }
  .rich-input input{
    display: block;
    width: 100%;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.05);
    background-color: transparent;
  }
  .rich-input.code input{
    padding-left: 10px;
    background-color: rgba(255,255,255,.3);
  }
  .rich-input input:focus{
    border-bottom: 1px solid #fff;
  }
</style>
